<template>
  <div>
    <el-row class="container-row" :gutter="20">
      <el-col :sm="8" :md="6" class="container-card" v-for="(item, index) in list" :key="index">
        <router-link :to="{ name: cname, params: { id: item.courseid }}">
          <el-card class="mobile-card good-card" :body-style="{ padding: 0 }" shadow="never">
            <el-row :gutter="5">
              <el-col :xs="12">
                <img :src="item.imgsrc" class="image card-img">
              </el-col>
              <el-col :xs="12">
                <div class="card-desc">
                  <p>{{ item.lessionName }}</p>
                  <div class="bottom clearfix">
                    <time class="time"></time>
                  </div>
                </div>
              </el-col>
            </el-row>          
          </el-card>
        </router-link>
      </el-col>
    </el-row>
  </div>
</template>


<script>
export default {
  props: ['list', 'cname']
}
</script>


<style scoped lang="less">
  .types-title {
    height: 50px;
    font-size: 25px; 
  }
  .container-card {
    border-radius: 6px;
    margin-bottom: 20px;

    a {
      display: block;
    }

    .good-card {
      border: 1px solid #ebeef5 !important;
      .card-img {
        width: 100%;
        display: block;
      }
      .card-desc {
        padding: 10px;
        box-sizing: border-box;
        text-align: left;
      }
    }
  }

</style>